<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            display: flex;
            width: 600px;
            height: 600px;
            background-color: slateblue;
            align-items: center;
            justify-content: center;
            perspective: 1000px;
        }

        .planet {
            width: 200px;
            height: 200px;
            /* 轨道 */
            border-top: 3px solid red;
            border-right: 3px solid yellow;
            border-bottom: 3px solid blue;
            border-left: 3px solid green;
            border-radius: 50%;
            /* margin: 0 auto; */
            transform-style: preserve-3d;
            /* transform: scaleY(50%) rotateZ(45deg); */
            position: absolute;
            /* 找到最近的position属性不为static元素定位 */
            animation: planet-rotate 20s linear infinite;
        }

        @keyframes planet-rotate {
            0% {
                transform: rotate(45deg) scaleY(0.5) rotate(0);
            }

            100% {
                transform: rotate(45deg) scaleY(0.5) rotate(360deg);
            }
        }

        .ball {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            top: -25px;
            left: calc(50% - 25px);
            position: absolute;
            background: url(./djs.jpg) center;
            /* transform: rotateZ(-45deg) scaleY(2); */
            animation: self-rotate 20s linear infinite;
        }

        @keyframes self-rotate {
            0% {
                transform: rotate(0) scaleY(2) rotate(-45deg);
            }

            100% {
                transform: rotate(-360deg) scaleY(2) rotate(-45deg);
            }
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="planet">
            <div class="ball"></div>
        </div>
    </div>
</body>

</html>